<template>
  <div class="granary-view">
    <!-- <van-search @click="goToHomeSearchView" shape="round" disabled :left-icon="icon" placeholder="幻想学院" /> -->
    <van-search shape="round" disabled :left-icon="icon" placeholder="搜标签、合集、文章、讨论、粮单、用户" />

    <div class="nav">
      <ul>
        <!-- <li v-for="(gn, index) in granaryNaviDataArr" :key="index" @click="goToGranaryNavItem(gn.url, index)"> -->
        <li v-for="(gn, index) in granaryNaviDataArr" :key="index">
          <img :src="gn.img" />
        </li>
      </ul>
    </div>

    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功"> -->
    <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="list">
          <div v-for="(gl, i) in granaryListDataArr" :key="i">
            <div class="one item" v-if="gl.moduleType == 0">
              <h2>{{ gl.moduleName }}</h2>
              <div class="box">
                <granary-list-item-type-one v-for="s in gl.dataList" :key="s.itemId" :bigAvaImg="s.blogInfo.bigAvaImg"
                  :blogNickName="s.blogInfo.blogNickName" :hotCount="s.postData.postCount.hotCount"
                  :digest="s.postData.postView.digest" :orign="s.postData.postView.firstImage.orign"
                  :tag="s.postData.postView.tagList[0]" :id="s.postData.postView.id" :goToHomeItem="goToHomeItem" />
              </div>
            </div>

            <div class="two item" v-if="gl.moduleType == 1">
              <h2>{{ gl.moduleName }}</h2>
              <div class="box">
                <granary-list-item-type-two v-for="s in gl.dataList" :key="s.itemId"
                  :coverUrl="s.postCollection.coverUrl" :name="s.postCollection.name"
                  :postCount="s.postCollection.postCount" :viewCount="s.postCollection.viewCount"
                  :tag="s.postCollection.tagList[0]" />
              </div>
            </div>

            <div class="three item" v-if="gl.moduleType == 2">
              <h2>{{ gl.moduleName }}</h2>
              <div class="box">
                <granary-list-item-type-three v-for="(s, i) in gl.dataList" :key="s.itemId" :index="i"
                  :bigAvaImg="s.blogInfo.bigAvaImg" :blogNickName="s.blogInfo.blogNickName"
                  :hotCount="s.postData.postCount.hotCount" :digest="s.postData.postView.digest"
                  :orign="s.postData.postView.firstImage.orign" :tag="s.postData.postView.tagList[0]"
                  :id="s.postData.postView.id" :goToHomeItem="goToHomeItem" />
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Api } from "@/utils/apis"
import icon from "@/assets/images/home/search.png"
import type {
  GranaryModuleType0,
  GranaryModuleType1,
  GranaryModuleType2,
  GranaryNaviDataType
} from "@/typings"
import GranaryListItemTypeOne from "@/components/HomeComponents/GranaryComponents/GranaryListItemTypeOne.vue";
import GranaryListItemTypeTwo from "@/components/HomeComponents/GranaryComponents/GranaryListItemTypeTwo.vue";
import GranaryListItemTypeThree from "@/components/HomeComponents/GranaryComponents/GranaryListItemTypeThree.vue";
import { showToast } from "vant";
import router from "@/router";

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let granaryListDataArr = ref<GranaryModuleType0[] | GranaryModuleType1[] | GranaryModuleType2[]>()
let granaryNaviDataArr = ref<GranaryNaviDataType[]>([])

// 获取数据
const getGranary = async () => {
  let data = await Api.getGranary()
  granaryNaviDataArr.value = data.data.navi
  granaryListDataArr.value = data.data.list
}
// 获取push数据
const getPush = async () => {
  let data = await Api.getGranary()
  granaryListDataArr.value!.push(...data.data.list)
}

const onLoad = () => {
  if (refreshing.value) {
    granaryListDataArr.value = [];
    refreshing.value = false;
  }
  // 异步更新数据
  //  axios 请求
  getPush()

  // 加载状态结束 
  loading.value = false;

  // 数据全部加载完成
  if (granaryListDataArr.value!.length >= 100) {
    finished.value = true;
  }
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
  showToast('刷新成功');
};

const goToHomeItem = (id: number) => {
  router.push({
    name: "item",
    query: {
      id
    }
  });
}

onMounted(() => {
  getGranary()
})

</script>

<style lang="scss" scoped>
.granary-view {
  width: 100vw;
  min-height: 100vh;
  margin-bottom: 55px;
  background-color: rgb(255, 255, 255);

  .nav {
    padding: 0 10px;

    ul {
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;

      li {
        margin: 0 5px;
        display: inline-block;

        img {
          width: 26vw;
        }
      }
    }
  }

  .list {
    div {
      width: 98vw;
      margin: 0 auto;

      .one,
      .three {
        .box {
          width: 100%;
          height: 262px;
          flex-direction: column;
          overflow-x: scroll;
          overflow-y: hidden;
          display: flex;
          // 折行
          flex-wrap: wrap;
          // 想要横向滚动  一定要设这个
          flex-direction: column;
          align-content: space-between;
          // 间距
          gap: 10px;

          .granary-list-item-type-one,
          .granary-list-item-type-three {
            width: 93%;
            height: 75px;
          }

          .granary-list-item-type-three {
            width: 91%;
          }
        }
      }

      .item {
        width: 94vw;
        margin: 0 auto;

        h2 {
          margin: 0;
          padding: 10px 0;
          font-size: 18px;
        }
      }

      .two {
        height: 180px;
        margin-bottom: 35px;

        .box {
          width: 100%;
          overflow-x: scroll;
          overflow-y: hidden;
          white-space: nowrap;
          display: flex;

          .granary-list-item-type-two {
            margin: 0 5px;
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>